<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../assert/css/font.css" th:href="@{/assert/css/font.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap.min.css" th:href="@{/assert/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="../../../assert/css/plugin/chosen/chosen.css"
          th:href="@{/assert/css/plugin/chosen/chosen.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap-table.css" th:href="@{/assert/css/bootstrap-table.css}"/>
    <link href="../../../assert/css/animate.min.css" rel="stylesheet" th:href="@{/assert/css/animate.min.css}">
    <link href="../../../assert/css/plugin/toastr/toastr.min.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/toastr/toastr.min.css}">
    <link href="../../../assert/css/plugin/jsTree/themes/default/style.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/jsTree/themes/default/style.css}">
    <link href="../../../assert/js/layui/css/layui.css" rel="stylesheet"
          th:href="@{/assert/js/layui/css/layui.css}" media="all">
    <link href="../../../assert/css/loaders.css" rel="stylesheet"
          th:href="@{/assert/css/loaders.css}">
    <link rel="stylesheet" href="../../../assert/css/jquery-ui.css" th:href="@{/assert/css/jquery-ui.css}"/>
    <link rel="stylesheet" href="../../../assert/js/bootstrap-fileinput/css/fileinput.min.css" th:href="@{/assert/js/bootstrap-fileinput/css/fileinput.min.css}"/>
    <link href="../../../assert/js/lib/jqwidgets-ver4.0.0/jqwidgets/styles/jqx.base.css" rel="stylesheet"
          th:href="@{/assert/js/lib/jqwidgets-ver4.0.0/jqwidgets/styles/jqx.base.css}"/>
    <link rel="stylesheet" href="../../../assert/css/index.css" th:href="@{/assert/css/index.css(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"/>
    <style>
        .table_msg {
            width: 100%;
            border: 1px solid #e4eaec;
            padding: 0px 10px;
            position: relative;
            top: 6px;
            background: #ddd;
        }

        .layui-form-switch {
            width: 48px;
        }
        .search_group label.control-label{
            width:70px;
        }
    </style>
</head>
<body class="oneStyle">
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="model_left">
            <!--<h4 class="model_title">质检模型</h4>-->
            <div class="search_box">
                <input type="text" style="width: 174px;" autocomplete="off"><span class="fa fa-search fa_btn" id="searchMenu"></span>
            </div>
            <div id="jstree" class="scrollbar">

            </div>
        </div>
        <div class="model_right">
            <div class="tools_bar">
                <div class="pull-left">
                    <a href="#" class="btn btn-default active" id="btnSearch" title="查询"><i class="fa fa-filter"></i> 隐藏</a>
                    <a href="#" class="btn btn-default active" id="refresh"><i class="fa fa-refresh"></i> 刷新</a>
                </div>
            </div>
            <div class="search on">
                <!--<div class="search_group">
                    <label class="control-label">分类：</label>
                    <div class="control-inline">
                        <select type="text" id="classify"  value=""  class="form-control search_input"></select>
                    </div>
                </div>-->
                <div class="search_group">
                    <label class="control-label">标签名称：</label>
                    <div class="control-inline">
                        <input type="text" id="tagName" value="" class="form-control search_input" autocomplete="off">
                    </div>
                </div>
                <!--<div class="search_group">
                    <label class="control-label">标签标识：</label>
                    <div class="control-inline">
                        <select id="tagType"  value=""  class="form-control search_input"></select>
                    </div>
                </div>-->
                <!--<div class="search_group">
                    <label class="control-label">包含关键词：</label>
                    <div class="control-inline">
                        <input type="text" id="keyInclude"  value=""  class="form-control search_input">
                    </div>
                </div>-->
                <!--<div class="search_group">
                    <label class="control-label">状态：</label>
                    <div class="control-inline">
                        <select type="text" id="state"  value=""  class="form-control search_input"></select>
                    </div>
                </div>-->
                <!--<div class="search_group">
                    <label class="control-label">创建人：</label>
                    <div class="control-inline">
                        <input name="" id="person" class="form-control search_input" autocomplete="off">
                    </div>
                </div>
                <div class="search_group">
                    <label class="control-label">创建时间：</label>
                    <div class="control-inline">
                        <input placeholder="开始日期" class="form-control layer-date search_input" id="start" autocomplete="off"> -
                        <input placeholder="结束日期" class="form-control layer-date search_input" id="end" autocomplete="off">
                    </div>
                </div>-->
                <div class="search_group">
                    <button id="search" class="btn  btn-primary">查询</button>
                    <button id="searchAll" class="btn  btn-primary">全查询</button>
                    <button id="reset" class="btn  btn-default">重置</button>
                    <button id="export" class="btn  btn-default">导出</button>
                </div>
            </div>
            <table id="myTable"></table>
        </div>
    </div>
</div>

<input type="hidden" id="areaId" value="" class="form-control search_input">
<input type="hidden" id="tagType" value="" class="form-control search_input">
<input type="hidden" id="tagId" value="" class="form-control search_input">
<form action="" id="exportForm" class="hidden" method="post" target="_self">
    <input type="text" id="areaIdE" name="areaId">
    <input type="text" id="tagTypeE" name="tagType">
    <input type="text" id="tagIdE" name="tagId">
    <input type="text" id="tagNameE" name="tagName">
    <input type="text" id="selectIdE" name="selectId">
    <input type="text" id="sortOrderE" name="sortOrder">
    <input type="text" id="sortNameE" name="sortName">
    <input type="text" id="isAllE" name="isAll">
</form>
<a id="basePath" th:href="@{/}"></a>
<script src="../../../assert/js/jquery.js" th:src="@{/assert/js/jquery.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/bootstrap.min.js" th:src="@{/assert/js/bootstrap.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script src="../../../assert/js/plugin/toastr/toastr.min.js"
        th:src="@{/assert/js/plugin/toastr/toastr.min.js}"></script>
<script src="../../../assert/js/base.js" th:src="@{/assert/js/base.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/jquery-ui.min.js" th:src="@{/assert/js/jquery-ui.min.js}"></script>
<script src="../../../assert/js/plugin/layer/laydate/laydate.js"
        th:src="@{/assert/js/plugin/layer/laydate/laydate.js}"></script>
<script src="../../../assert/js/changeTime.js" th:src="@{/assert/js/changeTime.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/jsTree/jstree.min.js"
        th:src="@{/assert/js/plugin/jsTree/jstree.min.js}"></script>
<script src="../../../assert/js/plugin/chosen/chosen.jquery.js"
        th:src="@{/assert/js/plugin/chosen/chosen.jquery.js}"></script>
<script src="../../../assert/js/layui/layui.js" th:src="@{/assert/js/layui/layui.js}"></script>
<script src="../../../assert/js/common.js" th:src="@{/assert/js/common.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/lib/jqwidgets-ver4.0.0/jqwidgets/jqx-all.js"
        th:src="@{/assert/js/lib/jqwidgets-ver4.0.0/jqwidgets/jqx-all.js}"></script>
<script src="../../../assert/js/bootstrap-fileinput/js/fileinput.min.js" th:src="@{/assert/js/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script src="../../../assert/js/bootstrap-fileinput/js/locales/zh.js" th:src="@{/assert/js/bootstrap-fileinput/js/locales/zh.js}"></script>
<script>

    //项目名称
    var basePath = $("#basePath").attr("href");
    var urlSearch = basePath + "/rest/busTag/busTagByPage";
    var urlSearchAll = basePath + "/rest/busTag/busTagAllByPage";
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function (url,code) {
            if(code == 1){
                $('#search').attr('data-code','');
                $('#searchAll').attr('data-code','search');
            }else{
                $('#searchAll').attr('data-code','');
                $('#search').attr('data-code','search')
            }
            $("#myTable").bootstrapTable('destroy');
            $('#myTable').bootstrapTable({
                url: url,         //请求后台的URL（*）
                method: "post", //请求方式（*）
                dataType: "json",
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                dataField: "rows", //服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
                totalField: "total",
                striped: false, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortName: "provincecode", //排序方式
                sortOrder: "asc", //排序方式
                clickToSelect: true,
                queryParams: oTableInit.queryParams, //传递参数（*）
                queryParamsType: "", //  queryParamsType = 'limit' 参数: limit, offset, search, sort, order;
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 15, 20, 25], //可供选择的每页的行数（*）
                idField: "id",
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                responseHandler: function (res) {
                    tools.tableData = res.result;
                    return {
                        "total": res.totalCount,//总页数
                        "rows": res.result   //数据
                    };
                },
                columns: [
                    {
                        checkbox: true, // 显示一个勾选框
                        align: 'center' // 居中显示
                    },
                    {
                        align: "center",
                        halign: "center",
                        title: '序号',//标题  可不加
                        width: 60,
                        field: 'id',
//                        sortable: true,
                        formatter: function (value, row, index) {
                            var getOptions = $("#myTable").bootstrapTable('getOptions');
                            var pagenum = getOptions.pageNumber;
                            var pagesize = getOptions.pageSize;
                            var st = (pagenum - 1) * pagesize;
                            return (st + index + 1) + "";
                        }
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'provincename',
                        title: '省份',
                        sortable: true
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'type',
                        title: '标签分类',
                        sortable: true
                    }, {
                        align: "center",
                        halign: "center",
                        field: 'name',
                        title: '标签名称',
                        sortable: true
                    },{
                        align: "center",
                        halign: "center",
                        field: 'tagtype',
                        title: '标签标识',
                        sortable: true,
                        formatter: function (value, row, index) {
                            if(row.tagtypename=="共用"){
                                row.tagtypename="话务小结/系统标签"
                            }
                            return row.tagtypename;
                        }
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'note',
                        title: '备注',
                        sortable: true,
                        formatter: function (value, row, index) {
                            if(value == null){
                                value=""
                            }
                            return "<div class='noteBoxTable' title='"+value+"'>"+value+"</div>";
                        }
                    }
                ],
                onLoadSuccess: function (data) {  //加载成功时执行
                    resize.me();
                    if (!data.total||data.total == 0) {
                        var src=basePath+"/assert/image/nodata.png";
                        $(".no-records-found").find("td").html('<img src="'+src+'" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                    }
                },
                onLoadError: function () {  //加载失败时执行
                    var src=basePath+"/assert/image/nodata.png";
                    $(".no-records-found").find("td").html('<img src="'+src+'" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                },
                formatLoadingMessage: function () {
                    return '<div class="loaded">' +
                        '<div class="loader">' +
                        '<div class="loader-inner line-scale-pulse-out">' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div>请稍等，数据正在加载中...</div>';
                }
            });
        };
        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                "pageSize": params.pageSize,
                "pageNum": params.pageNumber,
                "sortName": this.sortName,
                "sortOrder": this.sortOrder,
                "areaId": $.trim($("#areaId").val()),
                "tagType": $.trim($("#tagType").val()),
                "tagId": $.trim($("#tagId").val()),
                "tagName": $.trim($("#tagName").val())
            };
            // 导出时按照页面显示顺序
            $("#sortNameE").val(this.sortName);
            $("#sortOrderE").val(this.sortOrder);
            return temp;
        };
        return oTableInit;
    };
    var resize = {
        init: function () {
            resize.me();
            $(window).resize(function () {
                resize.me();
            })
        },
        me: function () {
            var winW = $(window).width();
            var winH = $(window).height();
            $(".ibox").width(winW - 20);
            $(".ibox").height(winH - 23);
            $("#jstree").height(winH - 60);
            $(".model_right").width(winW - 240);
            bs.autoTableHeight($('#myTable'),winH -$(".tools_bar").height()-9-$(".search").height())
        }
    };
    var tools = {
        tableData: [],
        seatIdArr:[],
        init: function () {
            tools.tabSearch();
            tools.search();
            tools.enterSearch();
            tools.reset();
            tools.refresh();
            tools.export();
        },
        hideLabel:function(form,input){
            form.jqxValidator('hideHint', input);
        },
        tabSearch: function () {
            var search = $(".search");
            $("#btnSearch").on("click", function () {
                if (search.hasClass("on")) {
                    search.slideUp();
                    search.removeClass("on");
                    $("#btnSearch").html('<i class="fa fa-filter"></i> 查询').attr("title", "显示查询条");
                } else {
                    search.slideDown();
                    search.addClass("on");
                    $("#btnSearch").html('<i class="fa fa-filter"></i> 隐藏').attr("title", "隐藏查询条");
                }

            });
        },
        search: function () {
            $("#search").on("click", function () {
                var oTable = new TableInit();
                oTable.Init(urlSearch,0);
            });
            $("#searchAll").on("click", function () {
                $("#tagId").val("");
                $("#areaId").val("");
                $("#tagType").val("");
//                $("#tagName").val("");
                $("#jstree").jstree("deselect_all", true);
                var oTable = new TableInit();
                oTable.Init(urlSearchAll,1);
            });
        },
        enterSearch: function () {
            $("body").on("keyup", function (e) {
                var code = e.charCode || e.keyCode;
                if (code == 13) {
                    //此处编写用户敲回车后的代码
                    tools.tableRefresh();
                }
            })
        },
        tableRefresh: function () {
            $("#myTable").bootstrapTable('refreshOptions', {pageNumber:1});
            $("#myTable").bootstrapTable('refresh');
        },
        reset: function () {
            $("#reset").on("click", function () {
                $("#tagId").val("");
                $("#areaId").val("");
                $("#tagType").val("");
                $("#tagName").val("");
                $("#jstree").jstree("deselect_all", true);
                var oTable = new TableInit();
                oTable.Init(urlSearch,0);
            })
        },
        refresh: function () {
            $("#refresh").on("click", function () {
                tools.tableRefresh();
            })
        },
        export: function () {
            $("#export").on("click", function () {
                if (tools.tableData.length == 0) {
                    toastrCog.error("没有可导出的数据哦！")
                    return;
                }
                var form = $("#exportForm");
                form.attr("action", basePath + "rest/busTag/exportExcel");
                $("#areaIdE").val($.trim($("#areaId").val()));
                $("#tagTypeE").val($.trim($("#tagType").val()));
                $("#tagIdE").val($.trim($("#tagId").val()));
                $("#tagNameE").val($.trim($("#tagName").val()));
                if($('#searchAll').attr('data-code') == 'search'){
                    $("#isAllE").val('1');
                }else{
                    $("#isAllE").val('');
                }
                // 选中的标签
                var rows = $("#myTable").bootstrapTable("getSelections");
                var selectIds = [];
                $.each(rows, function (i, row) {
                    selectIds.push(row.id);
                });
                $("#selectIdE").val(selectIds.join(","));
//                window.open(basePath+"/rest/model/download/modelInfo?"+JSON.stringify(form.serialize()))
                form[0].submit();
            })
        }
    };
    var menu = {
        init: function () {
            menu.render();
            menu.changeMenu();
            menu.search();
        },
        render: function (node) {
            var jstree = $("#jstree");
            jstree.jstree({
                "core": {
                    "animation": false,
                    "multiple": false,
                    "check_callback": true,
                    'data': function (obj, callback) {
                        $.ajax({
                            type: "GET",
                            url: basePath + 'rest/busTag/showTagTree',
//                            dataType: "json",
//                            async: false,
                            success: function (result) {
                                // 后台返回数据不会为null 一定有根节点中国电信 loopMenu时判断children是否空就可以了
                                callback.call(this, menu.loopMenu(result.children,false));
                            }
                        });
                    }
                },
                "types": {
//                    "default": {
//                        "icon": "fa fa-folder"
//                    },
//                    "html": {
//                        "icon": "fa fa-file-text-o"
//                    }
                    "default": {
                        "icon": "jstree-folder"
                    },
                    "html": {
                        "icon": "jstree-file"
                    }
                },
                "plugins": ["types", "search", "unique", "changed"]
            }).bind('loaded.jstree', function (e, data) {
                jstree.jstree("deselect_all", true);
                var obj = jstree.jstree("get_node", node);
                //$("#modelType").val(node);
                jstree.jstree('select_node', obj, true);
                $("li[aria-selected='true']").click();
            });
        },
        loopMenu: function (array,isOpen) {
            if (array.length > 0) {
                for (var i = 0; i < array.length; i++) {
                    var children = array[i]["children"];
                    if (children.length <= 0) {
                        array[i].type = "html"
                    } else {
//                        array[i].state = {"opened": "false"}
                    }
                    array[i].state = {"opened": false}
                    if (children) {
                        menu.loopMenu(children,isOpen);
                    }
                }
                return array;
            }else{
                // 返回空数组 避免一直转圈
                return [];
            }
        },
        changeMenu: function () {
            $('#jstree').on("changed.jstree", function (e, data) {
                // 当选中某个节点时 表格重新加载
                if (data.selected.length > 0) {
                    // 获取选中的节点
                    var selectNode = $("#jstree").jstree("get_node", data.selected);
                    if (data.selected > 0) {
                        // 选中的是标签节点
                        $("#areaId").val(selectNode.original.areaId);
                        $("#tagId").val(selectNode.original.tagId);
                        $("#tagType").val(selectNode.original.tagType);
                    } else {
                        // 判断节点level 从而判断是选中的省份节点还是标签标识节点
                        var level = selectNode.original.level;
                        if(level == 2){
                            // 选中的是标识节点 获取省份id 清空tagId
                            $("#areaId").val(selectNode.original.areaId);
                            $("#tagId").val("");
                            $("#tagType").val(selectNode.original.tagType);
                        }else {
                            // 选中的是省份节点 获取省份id 清空标识tagType和tagId
                            $("#areaId").val(selectNode.original.areaId);
                            $("#tagId").val("");
                            $("#tagType").val("");
                        }
                    }
                    var oTable = new TableInit();
                    oTable.Init(urlSearch,0);
                }
            });
        },
        search: function () {
            $("#searchMenu").on("click", function () {
                $("#jstree").jstree(true).search($.trim($(".search_box input").val()));
                menu.scrollSearch($("#jstree"));
            });
            $(".search_box input").on("keyup", function (e) {
                var code = e.charCode || e.keyCode;
                if (code == 13) {
                    $("#jstree").jstree(true).search($.trim($(".search_box input").val()));
                    menu.scrollSearch($("#jstree"));
                }
            })
        },
        scrollSearch: function (elem) {
            if (elem.find(".jstree-search").length > 0) {
                var odiv = elem.find(".jstree-search").eq(0)[0];
                var top = odiv.offsetTop;
                var height = odiv.offsetHeight;
                var elemTop = elem[0].scrollTop;
                //获取当前屏幕大小
                var size = elem.height();
                //加上元素本身的高度，是元素全部出现事件
                if ((top + height) < (elemTop + size) && (top + height) > elemTop) {

                } else {
                    elem.animate({scrollTop: top - 70}, "slow");
                }
            }
        },
        getMenuData: function () {
            var arr = [];
            $.ajax({
                type: "GET",
                url: basePath + 'rest/busTag/showTagTree',
                async: false,
                success: function (result) {
                    if (result != null) {
                        arr.push(result);
                    }
                }
            });
            return arr;
        },
        refresh: function () {
            var tree = $('#jstree');
            tree.jstree(true).settings.core.data = menu.loopMenu(menu.getMenuData()); // 新数据
            tree.jstree(true).refresh(); //刷新树
        }
    };

    /*var rule = {
        init: function () {
            rule.addRule();
        },
        addRule: function () {
            $("#addRule").on("click", function () {
                window.open('../home.html', 'newwindow', 'height=500, width=600, top=100, left=200, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');
            });
        }
    };*/
    layui.use(['form'], function () {
        var form = layui.form;
        //监听指定开关
        form.on('switch(switchTest)', function (data) {

        });
        //表单初始赋值
        form.val('example', {
            "open": true //开关状态
        })

    });
    $(function () {
        var oTable = new TableInit();
        oTable.Init(urlSearch,0);
        resize.init();
        tools.init();
        menu.init();
    })
</script>
</body>
</html>